<template>
	<view class="content">
		<view class="tab-bar">
			<view id="tab-bar" class="swiper-tab">
				<view @click="tapTab(0)" :class="['swiper-tab-list',tabIndex == 0 ? 'active' : '']">最新导购</view>
				<view @click="tapTab(1)" :class="['swiper-tab-list',tabIndex == 1 ? 'active' : '']">热门导购</view>
				<view class="swiper-tab-list" @click="popupOpen('class')">导购分类</view>
			</view>
			<view :class="['videolist',tabIndex == 0 ? 'block' : '']">
				<video-List v-for="(item, index) in videoList[0].list" :key="index" v-bind:item="item"></video-List>
			</view>
			<view :class="['videolist',tabIndex == 1 ? 'block' : '']">
				1111
			</view>
		</view>
		
		<popup-layer ref="class" direction="left">
			<view class="class_level_one">
				<view class="li_item active">全部导购</view>
				<view class="li_item">护肤彩妆/个护</view>
				<view class="li_item">名表/眼镜</view>
				<view class="li_item">珠宝配饰/戒指</view>
				<view class="li_item">女装/内衣</view>
				<view class="li_item">母婴/童鞋/玩具</view>
				<view class="li_item">女鞋/男鞋</view>
				<view class="li_item">男装/衬衫/外套</view>
				<view class="li_item">箱包/户外</view>
			</view>
		</popup-layer>
		
		<!-- 返回顶部 -->
		<view :class="['gotop',scrollTop > 500 ? 'gotops' : '']" @click="onGotoTop"><img src="~@/static/img/icon/gotop.png"></view>
	</view>
</template>

<script>
	import popupLayer from '@/components/popup-layer/popup-layer';
	import videoList from '@/components/video-list';
	export default {
		components: {
			popupLayer,
			videoList
		},
		data() {
			return {
				tabIndex: 0,
				scrollTop:0,
				videoList: [{}, {}],
			}
		},
		onPageScroll(res){
			this.scrollTop = res.scrollTop;
		},
		onLoad(){
			this.loadData();
			setTimeout(()=> {
				this.renderImage = true;
			},300);
		},
		methods:{
			async tapTab(index) {
				this.tabIndex = index;
			},
			//弹层显示隐藏
			popupOpen(ref){
				this.$refs[ref].show()
			},
			popupClose(ref){
				this.$refs[ref].close()
			},
			onGotoTop() {
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 300
				});
			},
			//链接跳转
			navTo(url){
				uni.reLaunch({  
					url
				})  
			},
			async loadData() {

				let videoList = await this.$api.json('videoList');
				this.videoList = videoList;
				
			}
		}
	}
</script>

<style lang="scss">
	page { height:calc(100%) - var(--window-bottom)!important; background:$bgcolor_white; }
	.videolist { display:none; text-align:left; padding:20upx; }
	.block { display:block; }
	.class_level_one {
		padding:26upx 20upx;
		.li_item { width:100%; height:60upx; line-height:60upx; font-size:$font-base; color:$font-color-666; padding:0 26upx; }
		.active { background:$vui_bgcolor; color:$bgcolor_white; border-radius:60upx; margin-bottom:10upx; }
	}
</style>